<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片旋转上传</title>
    <script src="jquery.min.js"></script>
    <script src="jquery-form.js"></script>
    <style>
        #right, #left, #btn-submit {
            position: absolute;
            top: 500px;
            width: 200px;
            height: 50px;
            background-color: lightseagreen;
            font-size: 20px;
            font-weight: 800;
            color: white
        }

        #left {
            left: 850px;
            background-color: orangered;
        }

        #right {
            left: 1070px;
            background-color: lightseagreen;
        }

        #btn-submit {
            left: 1290px;
            background-color: #61c755;
        }
    </style>
</head>
<body>
<form id="form-file">
    <input id="img" type="file" name="file" accept="image/*">
    <input type="hidden" name="degree" id="degree"/>
</form>
<div>
    <img id="show" style="max-height: 400px">
    <button id="left">向左旋转</button>
    <button id="right">向右旋转</button>
    <button id="btn-submit">上传</button>
</div>
</body>
<script>
    var currentDegree = 0;
    $("#btn-submit").click(function () {
        $("#degree").val(currentDegree)
        var form = $("#form-file");
        console.log(form)
        $(form).ajaxSubmit({
            url: "/upload",
            data: $(form).serialize(),
            async: false,
            type: "post",
            success: function (res) {
                if (res == "success") {
                    alert(res)
                } else {
                    alert("上传失败");
                }
            }
        });
    })
    //显示预览照片
    $("#img").change(function () {
        $("#show").attr("src", URL.createObjectURL($(this)[0].files[0]));

    });

    //旋转照片
    function rotate(degree) {
        degree = degree % 360;
        document.getElementById("show").style.transform = 'rotate(' + degree + 'deg)';
    };
    $("#right").click(function () {
        currentDegree = currentDegree + 90;
        if (currentDegree == 360) {
            currentDegree = 0;
        }
        rotate(currentDegree);
    });
    $("#left").click(function () {
        currentDegree = currentDegree - 90;
        if (currentDegree == -360) {
            currentDegree = 0;
        }
        rotate(currentDegree);
    });

</script>
</html>